<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2022/3/4
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@ include file="header.jsp"%>
    <title>Title</title>
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="layFilter"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        </div>
    </script>

    <script type="text/html" id="statusTpl">
        {{#     if(d.status == 1) {             }}
                    在售
        {{#     } else if(d.status == 2) {      }}
                    下架
        {{#     }else if (d.status == 3) {      }}
                    删除
        {{#     }                               }}
    </script>

    <script type="text/html" id="mainImageTpl">
       <%--<img src="/pic/{{d.mainImage}}"/>--%>
       <img src="{{d.mainImageUrl}}"/>
    </script>p

    <script>
        /*layui.use('table', function() {

        });*/
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,url:'${pageContext.request.contextPath}/product/selectByPage'
                ,cols: [[
                    {checkbox: true, fixed: true}
                    ,{field:'id', title: 'ID', sort: true}
                    ,{field:'name', title: '商品名'}
                    ,{field:'subtitle', title: '商品副标题'}
                    ,{field:'mainImage', title: '商品图片', templet: '#mainImageTpl'}
                    ,{field:'price', title: '价格', sort: true}
                    ,{field:'stock', title: '库存'}
                    ,{field:'status', title: '状态',templet: '#statusTpl'}
                    ,{field:'createTime', title: '创建时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss'):'未知'}}</div>"}
                    ,{field:'updateTime', title: '更新时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd'):'未知'}}</div>"}
                    ,{toolbar: '#barDemo'}
                ]]
                ,page: true
                ,id: 'tableId'
            });

            //头工具栏事件
            table.on('toolbar(layFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'deleteAll':
                        // [{"id":14,"name":"xxxx11","age":20,"gender":"男"},{"id":16,"name":"xxxx11","age":20,"gender":"男"}]
                        var data = checkStatus.data;
                        // layer.alert(JSON.stringify(data));
                        var ids = [];// [14,16]
                        $(data).each(function() {
                            // this
                            ids.push(this.id);
                        });
                        ids = ids.join(',');// '14,16'
                        layer.confirm('真的删除行么', function(index){
                            $.post(
                                '${path}/student/deleteAll',
                                {'ids': ids},
                                function(jsonResult) {
                                    if (jsonResult.code == 0) {
                                        // mylayer.okUrl(jsonResult.msg, '${path}/student/selectByPage');
                                        mylayer.okMsg(jsonResult.msg);
                                        // 删除完了之后刷新一下table页
                                        table.reload('tableId');
                                    } else {
                                        mylayer.errorMsg(jsonResult.msg);
                                    }
                                },
                                'json'
                            );
                        });
                        break;
                    case 'add':
                        layer.open({
                            type : 2,
                            area : ['800px', '500px'],
                            content : '${path}/product/getProductInsertPage'
                        });
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });

            //监听工具条
            table.on('tool(layFilter)', function(obj){
                // {"id":1,"name":"小李2","age":28,"gender":"女"}
                var data = obj.data;
                console.log(obj);
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                       $.post(
                           '${path}/student/deleteById',
                           {'id': data.id},
                           function(jsonResult) {
                               if (jsonResult.code == 0) {
                                   // mylayer.okUrl(jsonResult.msg, '${path}/student/selectByPage');
                                   mylayer.okMsg(jsonResult.msg);
                                   // 删除完了之后刷新一下table页
                                   table.reload('tableId');
                               } else {
                                   mylayer.errorMsg(jsonResult.msg);
                               }
                           },
                           'json'
                       );
                    });
                } else if(obj.event === 'edit'){
                    /*layer.alert('编辑行：<br>'+ JSON.stringify(data))*/
                    layer.open({
                        type : 2,
                        area : ['500px', '300px'],
                        content : '${path}/student/getStudentUpdatePage?id=' + data.id
                    });

                }
            });

        });
    </script>
</body>
</html>
